/*
  Index List Styles
  ------------------------------------------------------------------------------
*/

@import 'src/style/modules';

.index-list {
  border: 0;
  border-collapse: collapse;
  width: 100%;
}

.index-list--header-cell {
  @include no-user-select();
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 13px;
  font-size: $form-md-font;
  font-weight: 600;
  color: $g11-sidewalk;
  white-space: nowrap;
  height: 52px;
}

.index-list--cell {
  height: calc(100% - #{$ix-border});
  padding: $ix-marg-a + $ix-marg-b;
  background-color: $g3-castle;
  font-size: $form-md-font;
  font-weight: 500;
  color: $g13-mist;
  display: flex;
  align-items: center;
  transition: background-color 0.25s ease, color 0.25s ease;
}

// Alignment modifiers
.index-list--align-left {
  text-align: left;
}
.index-list--align-left .index-list--cell {
  justify-content: flex-start;
}

.index-list--align-right {
  text-align: right;
}
.index-list--align-right .index-list--cell {
  justify-content: flex-end;
}

.index-list--align-center {
  text-align: center;
}
.index-list--align-center .index-list--cell {
  justify-content: center;
}

// TD Style
.index-list--row-cell {
  position: relative;
  height: 52px;

  &:first-child .index-list--cell {
    border-radius: $radius 0 0 $radius;
  }

  &:last-child .index-list--cell {
    border-radius: 0 $radius $radius 0;
  }
}

// Row hover State
.index-list--row:hover .index-list--cell {
  background-color: $g4-onyx;
  color: $g18-cloud;
}

// Show cell contents on row hover
.index-list--show-hover .index-list--cell > * {
  transition: opacity 0.25s ease;
  opacity: 0;
}
.index-list--row:hover .index-list--show-hover .index-list--cell > * {
  opacity: 1;
}

// Row Disabled State
.index-list--row.index-list--row-disabled
  .index-list--row-cell
  .index-list--cell {
  background-color: rgba($g3-castle, 0.5);
  color: $g9-mountain;
  font-style: italic;

  a:link,
  a:visited,
  a:hover,
  a:active {
    transition: color 0.25s ease, opacity 0.25s ease;
    opacity: 0.7;
  }
}

// Row Disabled Hover State
.index-list--row.index-list--row-disabled:hover
  .index-list--row-cell
  .index-list--cell {
  background-color: rgba($g3-castle, 0.7);
  color: $g15-platinum;

  a:link,
  a:visited,
  a:hover,
  a:active {
    opacity: 0.9;
  }
}

// Empty state
.index-list--empty-cell {
  background-color: rgba($g3-castle, 0.5);
  border-radius: $radius;
  display: flex;
  align-content: center;
  justify-content: center;
  color: $empty-state-text;
}

/*
  Depth Styling
  ------------------------------------------------------------------------------
*/

.tabs--contents,
// TODO: Remove this .tabbed-page rule when the component is phased out
.tabbed-page {
  .index-list--cell {
    background-color: $g4-onyx;
  }
  .index-list--row:hover .index-list--cell {
    background-color: $g5-pepper;
  }
  .index-list--row-cell.index-list--row-disabled .index-list--cell {
    background-color: rgba($g4-onyx, 0.5);
  }
  .index-list--row:hover
    .index-list--row-cell.index-list--row-disabled
    .index-list--cell {
    background-color: rgba($g4-onyx, 0.7);
  }
  .index-list--empty-cell {
    background-color: rgba($g4-onyx, 0.5);
  }
}

/*
  Sortable Header Styling
  ------------------------------------------------------------------------------
*/

.index-list--sort-arrow {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-left: $ix-marg-a;
  opacity: 0;
  position: relative;
  top: -1px;
  transition: opacity 0.25s ease, transform 0.25s ease;

  > span.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.index-list--header-cell.index-list--sortable {
  transition: color 0.25s ease;

  &:hover {
    cursor: pointer;
    color: $c-pool;
  }
}

.index-list--header-cell.index-list--sort-ascending,
.index-list--header-cell.index-list--sort-descending {
  color: $g17-whisper;
}

.index-list--sort-ascending .index-list--sort-arrow {
  opacity: 1;
  transform: rotate(180deg);
}

.index-list--sort-descending .index-list--sort-arrow {
  opacity: 1;
  transform: rotate(00deg);
}

/*
  Margin for "Name" column in tables
  ------------------------------------------------------------------------------
*/

.index-list--labels {
  margin-left: $ix-marg-b;
}

.index-list--row-cell .index-list--cell a {
  white-space: nowrap;
}
